<html>

<head>
    <style>
        #app {
            background-color: red;
            width: 130px;
            height: 20vh;
        }

        .myclass {
            border: 5px solid blueviolet;
        }
    </style>
</head>

<body>
    <div#app.myclass>
        <!-- 支持id简写为#app,class简写为.my_class -->
        <!-- 中文需要编码 -->
        sciterAppDemo
        </div>
        <div#sub>-</div>
        <div#counter></div>
        <div#add>+</div>
    </body>
<script>
    let counter = 1;
    function update() {
        let testEl = <div>counter:{counter}</div>
        document.querySelector("#counter").patch(testEl);
    }
    update();

    document.on("click","div#sub",() => {
        counter = counter - 1;
        update();
    })
    document.on("click","div#add",() => {
        counter = counter + 1;
        update();
    })

    
</script>

</html>